
<!DOCTYPE html>
<html>
<title>测试主题</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="material/css/w3.css">
<link rel="stylesheet" href="material/fonts/font.css">
<link rel="stylesheet" href="material/theme/w3-theme-teal.css">
<link rel="stylesheet" href="material/fonts/Material+Icons.css">
<script src="material/js/jquery-2.1.3.min.js"></script>
<script src="material/js/chartjs-2.2.1.min.js"></script>
<script src="material/js/monitor-data.js"></script>

<style>
  html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
.w3-sidenav a {padding:16px;font-weight:bold}

.none-selection {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

.w3-animate-fading-2s{
  -webkit-animation:fading 2s infinite;
  animation:fading 2s infinite
  }

   /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

</style>
<body>

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left w3-card-2" style="z-index:3;width:250px;" id="mySidenav">
  <a href="#" class="w3-border-bottom w3-large"><img src="icon.jpg" style="width:80%;height:32px"></a>
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-text-teal w3-hide-large w3-closenav w3-large">
    Close
    <i class="material-icons w3-right">close</i>
    <!--<i><img style="width: 24px;height: 24px" src="icon/ic_clear_white_24dp_2x.png"></i>-->
  </a>
  <a href="javascript:void(0)" onclick="scrollToElement('#content-graphic-one')" class="w3-light-grey w3-medium">坐席状态图</a>
  <a href="javascript:void(0)" onclick="scrollToElement('#content-graphic-two')">时段统计图</a>
  <a href="javascript:void(0)" onclick="scrollToElement('#content-core-data')">核心统计数据</a>
  <a href="javascript:void(0)" onclick="scrollToElement('#content-custom_list')">自定义统计数据</a>
  <hr>
  <a href="javascript:void(0)" onclick="scrollToElement('#content-custom_setting')">自定义数据配置</a>
  <div class="w3-accordion">
    <a onclick="myAccordion('demo')" href="javascript:void(0)">
      热线号 
      <!--<img style="width: 24px;height: 24px" src="icon/ic_arrow_drop_down_black_24dp_2x.png">-->
      <i class="material-icons w3-right">arrow_drop_down</i>
    </a>
    <div id="demo" class="w3-accordion-content w3-padding">
      <a href="#">全部</a>
    </div>
  </div>
</nav>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<div class="w3-overlay w3-large w3-animate-opacity w3-center" style="z-index:4;" id="myLoading">
  <i class="w3-spin material-icons md-48" style="position: absolute;
    top: 50%;"  onclick="w3_loaded()">refresh</i>
</div>
<div class="w3-main" style="margin-left:250px;">

  <div id="myTop" class="w3-top w3-container w3-padding-16 w3-theme w3-large w3-left-align">
      <!--<img class="w3-opennav w3-hide-large w3-large w3-margin-left w3-margin-right" style="width: 24px;height: 24px" onclick="w3_open()" src="icon/ic_menu_white_24dp_2x.png"/>-->
      <i onclick="w3_open()" class="w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right material-icons w3-left">menu</i>
      <span id="myIntro" class="w3-hide">
        测试主题
      </span>
  </div>

  <header class="w3-container w3-theme w3-padding-64" style="padding-left:32px">
    <h1 class="w3-xxxlarge w3-padding-16">测试主题</h1>
  </header>
  <div class="w3-container w3-padding-32" style="padding-left:32px;padding-right:32px">
    <div id="content-graphic-one">
      <h2>坐席状态图</h2>
      <p>坐席状态图显示当前坐席状态的实时统计数据。</p>

      <ul class="w3-leftbar w3-theme-border" style="list-style:none">
        <li>数据每间隔三秒刷新一次</li>
        <!--<li>Easier to learn, and easier to use than other CSS frameworks.</li>
        <li>Uses standard CSS only (No jQuery or JavaScript library).</li>
        <li>Speeds up mobile HTML apps.</li>
        <li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>-->
      </ul>
      <br>
      <div class="w3-container w3-padding-16 w3-card-2" style="background-color:#eee">
        <canvas id="_chart" width="2" height="3"/>
      </div>
    </div>

    <hr>

    <div id="content-graphic-two">
      <h2>时段统计图</h2>
      <p>时段统计显示当天当时的统计数据。</p>

      <ul class="w3-leftbar w3-theme-border" style="list-style:none">
        <li>数据并不实时刷新</li>
        <!--<li>Easier to learn, and easier to use than other CSS frameworks.</li>
        <li>Uses standard CSS only (No jQuery or JavaScript library).</li>
        <li>Speeds up mobile HTML apps.</li>
        <li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>-->
      </ul>
      <br>
      <div class="w3-container w3-padding-16 w3-card-2" style="background-color:#eee">
        <canvas id="_chart2" width="2" height="3"/>
      </div>
    </div>
    <hr>
    <h2 id="content-core-data">核心数据</h2>
    <ul class="w3-leftbar w3-theme-border" style="list-style:none">
      <li>概括系统当前的数据集合</li>
      <!--<li>Easier to learn, and easier to use than other CSS frameworks.</li>
      <li>Uses standard CSS only (No jQuery or JavaScript library).</li>
      <li>Speeds up mobile HTML apps.</li>
      <li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>-->
    </ul>
    <ul id="live-core-ui" class="w3-ul w3-card-2">
      <li class="w3-blue"><h4>当前数据</h4></li>
      <li>当前呼入数<span data-id="ContactInbound" class="w3-badge w3-right w3-blue w3-margin-right">9</span></li>
      <li>当前排队数<span data-id="ContactInQueue" class="w3-badge w3-right w3-blue w3-margin-right">3</span></li>
      <li>呼入通话数<span data-id="InboundConnect" class="w3-badge w3-right w3-blue w3-margin-right">1</span></li>
      <li>呼出通话数<span data-id="OutboundConnect" class="w3-badge w3-right w3-blue w3-margin-right">3</span></li>
    </ul>
    <br>
    <ul id="report-core-ui" class="w3-ul w3-card-2">
      <li class="w3-teal"><h4>历史统计</h4></li>
      <li>呼入量<span data-id="inboundNum" class="w3-badge w3-right w3-teal w3-margin-right">3</span></li>
      <li>转人工量<span data-id="acdCallsNum" class="w3-badge w3-right w3-teal w3-margin-right">3</span></li>
      <li>人工接通量<span data-id="ansAcdCallNum" class="w3-badge w3-right w3-teal w3-margin-right">3</span></li>
      <li>呼出量<span data-id="outboundNum" class="w3-badge w3-right w3-teal w3-margin-right">3</span></li>
      <li>排队放弃量<span data-id="abnAcdCallNum" class="w3-badge w3-right w3-teal w3-margin-right">3</span></li>
      <li>
        <span class="w3-col w3-padding-top w3-padding-bottom" style="width:128px">派对接通率</span>
        <div class="w3-rest w3-padding">
          <div class="w3-progress-container">
            <div id="acdAnsRate" data-unit="%" data-id="acdAnsRate" class="w3-progressbar w3-orange" style="width:25%">
              <div class="w3-center w3-text-white">25%</div>
            </div>
          </div>
        </div>
      </li>
      <li class="w3-row">
        <span class="w3-col w3-padding-top w3-padding-bottom" style="width:128px">服务水平</span>
        <div class="w3-rest w3-padding">
          <div class="w3-progress-container">
            <div id="serviceLevel_20" data-unit="%" data-id="serviceLevel_20" class="w3-progressbar w3-green" style="width:60%">
              <div class="w3-center w3-text-white">60%</div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <hr>
    <h2 id="content-custom_list">自定义数据列表</h2>
    <p>自定义数据指标根据用户的选择(相较于核心数据面板)可以显示更多或者更少的数据指标</p>
    
    <ul class="w3-leftbar w3-theme-border" style="list-style:none">
        <li>左侧菜单栏<i class="w3-text-teal">自定义数据配置</i>，或者滚动到底部。</li>
        <li>带有呼吸效果的是实时数据，每隔一段时间自动刷新。</li>
        <!--<li>Uses standard CSS only (No jQuery or JavaScript library).</li>
        <li>Speeds up mobile HTML apps.</li>
        <li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>-->
    </ul>
    
    <div id="custom-live-ui" class="w3-row-padding">

      <div data-selector="div>div.w3-blue" data-id="ContactInbound" class="w3-col s6 m3 l2">
        <div class=" w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >当前呼入数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="ContactInQueue" class="w3-col s6 m3 l2">
        <div class=" w3-center w3-card-4 w3-indigo ">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >当前排队数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="InboundConnect" class="w3-col s6 m3 l2">
        <div class=" w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div>呼入通话数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="OutboundConnect" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >呼出通话数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentTotal" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >签入人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentNotReady" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s  w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >置忙人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentReady" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >空闲人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentAfterCallWork" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >整理人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentOtherWork" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >休息人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentTalking" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >通话人数</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="AgentOtherstatus" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-animate-fading-2s w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >其他人数</div>
        </div>
      </div>
    </div>
    <br>
    <div id="custom-report-ui" class="w3-row-padding">
      <!-- 这里的开始的数据 全部为 非实时数据的 统计数据-->
      <div data-selector="div>div.w3-blue" data-id="inboundNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >呼入量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="acdCallsNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >转人工量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="ansAcdCallNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >人工接通量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="abnAcdCallNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >排队放弃量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="%" data-id="acdAnsRate" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >排队接通率</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="%" data-id="serviceLevel_20" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >服务水平</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="outboundNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >呼出量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="s" data-id="avgInqueueTimeLen" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >平均排队时长</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="s" data-id="maxInqTimeLen" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >最大排队时长</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="s" data-id="avgTalkingTimeLen" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >平均通话时长</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="s" data-id="avgRingTimeLen" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >平均振铃时长</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="abnRingNum" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >振铃放弃量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-id="ivrAbnTotal" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >IVR放弃量</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="%" data-id="abnRate" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >放弃率</div>
        </div>
      </div>

      <div data-selector="div>div.w3-blue" data-unit="%" data-id="acdRate" class="w3-col s6 m3 l2">
        <div class="w3-center w3-card-4 w3-indigo">
            <div class="w3-blue w3-padding-top w3-padding-bottom">100</div>
            <div >IVR转接率</div>
        </div>
      </div>

    </div>

    <hr>
    <h2 id="content-custom_setting">配置自定义数据</h2>
    <div class="w3-container w3-sand w3-leftbar">
      <p>
        <i>配置自定义数据，将需要显示在自定义数据列表中数据项选中并保存，即可更新界面。</i>
        <br>
        <i>可以设置可选择的热线号以及显示的数据。</i>
      </p>
    </div>

    <br>

    <div class="w3-card-4">
      <div class="w3-container w3-teal">
        <h4>配置热线号</h4>
      </div>
      <form class="w3-container">
        <div id="config-num-items" class="w3-row w3-margin-top w3-margin-bottom">
          <div class="w3-col s4 m2 w3-margin-top w3-margin-bottom">
            <i class="none-selection material-icons w3-left w3-text-blue">check_box</i>
            <label class="w3-validate w3-text-teal">CheckBox</label>
          </div>
        </div>

        <div class="w3-row w3-margin-top w3-margin-bottom">
          <div class="w3-col s6 m6">
            <button data-id="config-num-items" id="saveNum" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">保存</button>
          </div>
          <div class="w3-col s6 m6">
            <button data-id="config-num-items" id="reset_num" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">清空选择</buttona>
          </div>
        </div>
      </form>
    </div>

    <br>

    <div class="w3-card-4">
      <div class="w3-container w3-teal">
        <h4>配置数据指标</h4>
      </div>
      <form class="w3-container">
        <div id="config-data_items" class="w3-row w3-margin-top w3-margin-bottom">

          <div data-id="ContactInbound" class="w3-col s4 m2 w3-margin-top w3-margin-bottom">
            <i class="none-selection material-icons w3-left">check_box_outline_blank</i>
            <label class="w3-validate">当前呼入数</label>
          </div>

        
        </div>

        <div class="w3-row w3-margin-top w3-margin-bottom">
          <div class="w3-col s6 m6">
            <button data-id="config-data_items" id="saveData" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">保存</button>
          </div>
          <div class="w3-col s6 m6">
            <button data-id="config-data_items" id="reset_data" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">清空选择</buttona>
          </div>
        </div>
      </form>
    </div>
    <br>

    <!--<h2 class="w3-section w3-text-teal">Colors</h2>
    <p>W3.CSS uses color classes.</p>
    <p>The color classes are inspired by colors used in marketing, road signs, and sticky notes.</p>
    <div class="w3-container w3-red"><p>w3-red</p></div><br>
    <div class="w3-container w3-pink"><p>w3-pink</p></div><br>
    <div class="w3-container w3-purple"><p>w3-purple</p></div><br>
    <div class="w3-container w3-deep-purple"><p>w3-deep-purple</p></div><br>
    <div class="w3-container w3-indigo"><p>w3-indigo</p></div><br>
    <div class="w3-container w3-blue"><p>w3-blue</p></div><br>
    <div class="w3-container w3-light-blue"><p>w3-light-blue</p></div><br>
    <div class="w3-container w3-cyan"><p>w3-cyan</p></div><br>
    <div class="w3-container w3-aqua"><p>w3-aqua</p></div><br>
    <div class="w3-container w3-teal"><p>w3-teal</p></div><br>
    <div class="w3-container w3-green"><p>w3-green</p></div><br>
    <div class="w3-container w3-light-green"><p>w3-light-green</p></div><br>
    <div class="w3-container w3-lime"><p>w3-lime</p></div><br>
    <div class="w3-container w3-sand"><p>w3-sand</p></div><br>
    <div class="w3-container w3-khaki"><p>w3-khaki</p></div><br>
    <div class="w3-container w3-yellow"><p>w3-yellow</p></div><br>
    <div class="w3-container w3-amber"><p>w3-amber</p></div><br>
    <div class="w3-container w3-orange"><p>w3-orange</p></div><br>
    <div class="w3-container w3-deep-orange"><p>w3-deep-orange</p></div><br>
    <div class="w3-container w3-blue-grey"><p>w3-blue-grey</p></div><br>
    <div class="w3-container w3-brown"><p>w3-brown</p></div><br>
    <div class="w3-container w3-light-grey"><p>w3-light-grey</p></div><br>
    <div class="w3-container w3-grey"><p>w3-grey</p></div><br>
    <div class="w3-container w3-dark-grey"><p>w3-dark-grey</p></div><br>
    <div class="w3-container w3-black"><p>w3-black</p></div><br>
    <div class="w3-container w3-pale-red"><p>w3-pale-red</p></div><br>
    <div class="w3-container w3-pale-yellow"><p>w3-pale-yellow</p></div><br>
    <div class="w3-container w3-pale-green"><p>w3-pale-green</p></div><br>
    <div class="w3-container w3-pale-blue"><p>w3-pale-blue</p></div>-->

  </div>

  <footer class="w3-container w3-theme w3-padding-32" style="padding-left:32px">
    <h5>开发者</h5>
    <p>田兵 </p>
    <p>Copyright © 2016 Tian Bing. 保留所有权利。</p>
  </footer>
     
</div>

<script>

// 获取可定制热线号 接口
var httpLine = "serviceno.json";
    // 大屏实时数据接口
var http1 = "livedata.json";
    // 大屏报表接口
var http2 = "report.json";
    // 大屏时段接口
var http3 = "timers.json";
// 获取 订阅的显示数据

var dataNumFilterUrl = "num_filter.json"

var dataIndexFilterUrl = "filter.json"

$().ready(function(){
  w3_loading();
  initData(httpLine,http1,http2,http3,dataNumFilterUrl,dataIndexFilterUrl,function (){
    w3_loaded();
    repeatLiveData(http1);

    $('#reset_num').each(function (){
        var $item = $(this);
        $item.unbind('click').bind('click',function(e){
            resetCheckBox($item.data('id'));
            e.preventDefault();
        })
    })

    $('#reset_data').each(function (){
        var $item = $(this);
        $item.unbind('click').bind('click',function(e){
            resetCheckBox($item.data('id'));
            e.preventDefault();
        })
    })

    

    $('#saveData').unbind('click').bind('click',function(e){
        saveCustomData();
        e.preventDefault();
    });

    $('#saveNum').unbind('click').bind('click',function(e){
        saveCustomNum();
        e.preventDefault();
    });
  })
});

</script>
     
</body>
</html> 